<template>
  <div class="content">
    <van-nav-bar title="首页" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in 4" :key="item">{{ index + 1 }}</van-swipe-item>
    </van-swipe>
  </div>
  <!-- <van-signature @submit="onSubmit" @clear="onClear" /> -->
  <!-- <van-image v-if="image" :src="image" /> -->
  <!-- 联系人列表 -->
  <!-- <van-contact-list v-model="chosenContactId" :list="list" @add="onAdd" @edit="onEdit" @select="onSelect" /> -->
  <!-- <main>
    <TheWelcome /> 
    <van-button type="primary">按钮</van-button>
  </main> -->
  <lists :list="list">
    <template v-slot:left></template>
    <template #default>
      <div class="desc">我是默认插槽啊</div>
    </template>
    <template v-slot:right>
      <div>具名插槽</div>
    </template>
  </lists>
</template>
<!-- 下面的写法是setup语法糖 -->
<script setup name="homes">

import { onMounted, ref, reactive } from 'vue'
import { showToast } from 'vant';
import { useRouter } from 'vue-router'
const router = useRouter()
// 导入 Axios 实例
import apiClient from '../utils/api';

import lists from '../components/list.vue'

// const image = ref('');
const list = reactive([]);

// const onSubmit = (data) => {
//   image.value = data.image;
// };
// const chosenContactId = ref('1');
// function onClear() {
//   showToast('clear');
// };
// const onAdd = () => { router.push({ path: '/AboutView' }) };
// const onEdit = (contact) => showToast('编辑' + contact.id);
// const onSelect = (contact) => showToast('选择' + contact.id);
async function getATalk() {
  await apiClient.get('/user/list')
    .then(function (res) {
      console.log('获取的列表', res.data);
      list.value = res.data.list
    })
    .catch(function (error) {
      console.log(error);
    });
};

onMounted(() => {
  for (let i = 0; i < 5; i++) {
    list.push({
      id: i + 1,
      title: `标题 ${i + 1}`
    });
  }
  // 在Vue 3中，直接将一个响应式对象重新赋值为一个新的对象会导致响应式系统失效，并且会触发警告或错误。这种做法破坏了Vue的响应式数据流，因此不被允许。如果你想在组件挂载后更新list数组，你应该使用数组的方法来进行操作，而不是直接重新赋值。例如，你可以使用splice方法来清空数组并添加新的元素：
  // 清空数组
  // list.splice(0, list.length);
  // // 添加新的对象到数组中
  // list.push({
  //   id: 1,
  //   title: '我是标题'
  // });
});



// import TheWelcome from '../components/TheWelcome.vue'
</script>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.desc{
  font-size: 12px;
  color: #777;
}
</style>
